<template>
  <view class="parent-elemet">
    <view class="popular-forums">
      <view class="forum">
        <view class="item-forum" v-for="(item, index) in forumList" :key="index" @click="viewDetails(item)">
          <up-image
            :show-loading="true"
            shape="circle"
            :src="item.url"
            width="40px"
            height="40px"
          ></up-image>
          <view class="forum-right">
            <text>{{ item.content }}</text>
            <view class="item-footer">
              <text class="item-left">{{ item.name }}</text>
              <up-icon name="eye" size="20"></up-icon>
              <text class="item-right">{{ item.quantity }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
const forumList = ref<any>([
  {
    url:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    content: "[无人机租赁] 正式与您相遇",
    name: "zyz",
    quantity: "22",
  },
  {
    url:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    content: "《政策解读：新无人机飞行管理规定对飞手的影响及应对策略》",
    name: "zyz",
    quantity: "22",
  },
  {
    url:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    content: "无人机飞手如何在旅游航拍中捕捉独特视角",
    name: "zyz",
    quantity: "22",
  },
  {
    url:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    content: "《政策解读：新无人机飞行管理规定对飞手的影响及应对策略》",
    name: "zyz",
    quantity: "22",
  },
  {
    url:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    content: "无人机飞手如何在旅游航拍中捕捉独特视角",
    name: "zyz",
    quantity: "22",
  },
  {
    url:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    content: "《政策解读：新无人机飞行管理规定对飞手的影响及应对策略》",
    name: "zyz",
    quantity: "22",
  },
  {
    url:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    content: "无人机飞手如何在旅游航拍中捕捉独特视角",
    name: "zyz",
    quantity: "22",
  },
]);

const viewDetails = (item: any) => {
  navigateTo(`/socialPages/social/postDetails`);
};
const navigateTo = (url: any) => {
  uni.navigateTo({
    url,
  });
};
</script>

<style lang="scss" scoped>
.parent-elemet {
  height: 100vh;
  overflow: auto;
  .popular-forums {
    padding: 0 15px;
    .item-forum {
      display: flex;
      align-items: center;
      padding: 10px;
      border-radius: 4px;
      border: 1px solid #f0f0f0;
      margin-top: 10px;
      .forum-right {
        margin-left: 30px;
      }
      .item-footer {
        display: flex;
        align-items: center;
        margin-top: 5px;
        text {
          font-size: 14px;
          &:nth-child(2) {
            padding: 0 10px;
          }
        }
        .item-left {
          margin-right: 5px;
        }
        .item-right {
          margin-left: 5px;
        }
      }
    }
  }
}
</style>
